<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .box {
            height: 100px;
            display: flex;
            width: 400px;
            margin: 0 auto;
            padding: 5px;
        }

        .box>li {
            -webkit-box-flex: 1.0;
            box-flex: 1.0;
            -webkit-flex: 1.0;
            flex: 1;
            width: 0;
            background-color: #EE6D6D;
            border: thin solid #3C9FF0;
            border-width: thin;
            border-width: medium;
            border-width: 0.3em 0 9px;
            margin: 5px;
            /*解决兼容性问题*/
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script type="text/javascript">
        //判断访问终端
        var browser={
            versions:function(){
                var u = navigator.userAgent, app = navigator.appVersion;
                return {
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                    iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
                    weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
                    qq: u.match(/\sQQ/i) == " qq" //是否QQ
                };
            }(),
            language:(navigator.browserLanguage || navigator.language).toLowerCase()
        }
//        document.write("用户代理: " + navigator.userAgent);//用户代理
//         document.write("版本信息: " + navigator.appVersion);//浏览器版本
        //判断是否IE内核
        if(browser.versions.trident){
            console.log("is IE"); 
        }
        if(browser.versions.weixin){
            console.log('weixin')
        }
        if(browser.versions.gecko){
            console.log('huohu')
        }
        //判断是否webKit内核
        if(browser.versions.webKit){
            console.log("is webKit"); 
        }
        
        //判断是否移动端
        if(browser.versions.mobile||browser.versions.android||browser.versions.ios){
            console.log("移动端"); 
        }
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
            console.log(navigator.userAgent);  
           //苹果端
        } else if (/(Android)/i.test(navigator.userAgent)) {
            console.log(navigator.userAgent); 
            //安卓端
        } else {
           //pc端
        };
    </script>
</body>

</html>